<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>  </title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <script>
        //MVVM(一个架构)
        //M：model 模型层
        //V：View 视图层
        //VM：viewmodel 视图模型层
        // vm：
        //     ①：监听输入框的内容，改变model里面的变量inputVal
        //     ②：inputVal发生改变，是不是要更新到页面（view视图层上）用到这个变量的地方，
        //        通过viewmodel层去更新页面

        // V（视图层）-> VM（视图模型层） -> model
        // 例子： 监听input输入框内输入的内容，改变变量inputVal的值

        // model（模型层） -> VM（视图模型层） -> view（视图层）
        // 例子： inputVal的值发生改变，通过VM更新界面上的p标签，然后更新到页面上

        // 只操作数据，不操作DOM

        // 补充：MVC  M：模型层   V：view视图    C：Controller控制器

    </script>
</body>
</html>